<template>
  <div class="realInfo">
    <div class="abs-left dis-flex">
      <i class="fa fa-angle-left"></i>
    </div>
    <div class="abs-right  dis-flex">
      <button type="button" class="btn fz48">
        <i class="fa fa-caret-right"></i>
      </button>
    </div>
    <div class="rel-middle dis-flex">
      <!-- {{ stock.realInfo }} -->

      <div class="cp_left">
        <div class="align-cm">
          <NumStock class="fz96" :num="stock.realInfo.last_px"> </NumStock>
        </div>

        <div class="dis-flex flex-sbc">
          <NumStock class="fz40" :num="stock.realInfo.px_change"> </NumStock>
          <NumStock class="fz40" :num="stock.realInfo.px_change_rate">
            <template slot="after">%</template>
          </NumStock>
        </div>
      </div>
      <div class="cp_right">
        <div class="fz40">
          {{ stock.realInfo.prod_name }}
          {{ stock.code }}
        </div>
        <div class="dis-flex flex-sac fz32">
          <div class="dis-col">
            <NumStock
              class="dis-bl"
              :num="stock.realInfo.open_px"
              :useClassName="{ text: true }"
            >
              <template slot="before">
                <span class="fc-gray50">开</span></template
              >
            </NumStock>
            <NumStock
              class="dis-bl"
              :num="stock.realInfo.preclose_px"
              :useClassName="{ text: true }"
            >
              <template slot="before"
                ><span class="fc-gray50">收</span></template
              >
            </NumStock>
          </div>
          <div class="dis-col">
            <NumStock
              class="dis-bl"
              :num="stock.realInfo.high_px"
              :useClassName="{ 'text-red': true }"
            >
              <template slot="before">
                <span class="fc-gray50">高</span></template
              >
            </NumStock>
            <NumStock
              class="dis-bl"
              :num="stock.realInfo.low_px"
              :useClassName="{ 'text-green': true }"
            >
              <template slot="before"
                ><span class="fc-gray50">低</span></template
              >
            </NumStock>
          </div>
          <div class="dis-col">
            <NumStock
              class="dis-bl"
              :num="中式计数(stock.realInfo.business_balance)[0]"
              :useClassName="{ text: true }"
            >
              <template slot="before"
                ><span class="fc-gray50">额</span></template
              >
              <template slot="after">{{
                中式计数(stock.realInfo.business_balance)[1]
              }}</template>
            </NumStock>
            <NumStock
              class="dis-bl"
              :num="stock.realInfo.turnover_ratio"
              :useClassName="{ text: true }"
            >
              <template slot="before"
                ><span class="fc-gray50">换</span></template
              >
              <template slot="after">%</template>
            </NumStock>
          </div>
        </div>
        <div></div>
      </div>
    </div>
  </div>
</template>

<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'name',
  mixins: [], //混入
  components: {
    NumStock: () => {
      return import('@/components/NumStock.vue');
    },
  }, //组件
  props: {}, //集成属性
  data() {
    return {};
  },
  computed: {
    ...mapState(['winSize', 'stock']),
  },
  methods: {
    ...mapMutations([]),

    test: function() {
      console.log('test');
    },
    中式计数: function(num) {
      if (typeof num !== 'number' || isNaN(num)) {
        throw new Error('Invalid input: Please provide a valid number.');
      }

      if (num >= 1e8) {
        // 超过亿
        const billion = num / 1e8;
        return [`${billion.toFixed(2)}`, '亿'];
      } else if (num >= 1e4) {
        // 超过万
        const tenThousand = num / 1e4;
        return [`${tenThousand.toFixed(2)}`, '万'];
      } else {
        // 不到万
        return [`${num.toFixed(0)}`, ''];
      }
    },
    ajaxData: function() {
      this.$store.dispatch('stock/fetchRealData', {});
    },
  },
};
</script>
<style lang="less" scoped>
@vw100: 1080 /100;
@lw: 108;
@rw: 168;
@lw2vw: unit((@lw / @vw100), vw);
@rw2vw: unit((@rw / @vw100), vw);
.realInfo {
  position: relative;
  height: unit((200 / @vw100), vw);
}
.abs-left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: @lw2vw;
  height: 100%;
  font-size: unit((96 / @vw100), vw);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.rel-middle {
  margin-left: @lw2vw;
  margin-right: 2rw2vw;
  padding-top: unit((24 / @vw100), vw);
}
.abs-right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  flex-grow: 0;
  width: @rw2vw;
  height: 100%;
  font-size: unit((100 / @vw100), vw);
  align-items: center;
  .btn {
    width: unit((33 / @vw100), vw);
    height: unit((66 / @vw100), vw);
    margin: 0 auto;
    text-align: center;
    background-color: rgb(255, 221, 220);
    color: rgb(237, 93, 93);
  }
}
.cp_left {
  line-height: 1.1;
  width: unit((250 / @vw100), vw);
  margin-left: unit((25 / @vw100), vw);
  margin-right: unit((25 / @vw100), vw);
}
.cp_right {
  line-height: 1.5;
  width: unit((500 / @vw100), vw);
}
</style>
